<script setup>
import { Delete, Edit } from '@element-plus/icons-vue'
import PageContainer from './components/pageContainer.vue'
import { articleGetchannelList, artileDeleteChannel } from '@/api/article'
import { ref } from 'vue'
import { onMounted } from 'vue'
import ChannelEdit from './components/channelEdit.vue'
import ChannelBox from '@/components/channelBox.vue'
defineOptions({
  name: 'ArtilceChannel',
})

const title = '文章分类'
const box = ref()
// 定义数据对象
const formModel = ref()

const isLoading = ref(false)
const getlist = async () => {
  isLoading.value = true
  const res = await articleGetchannelList()

  formModel.value = res.data.data
  isLoading.value = false
}
getlist()

// 定义编辑方法
const handleEdit = (row) => {
  channelEdit.value.open(row)
}

// 定义删除方法
const handleDelete = async (row) => {
  // 调用删除接口
  await box.value.open(row)
}

const channelEdit = ref()

// 定义添加分类方法
const addChannel = () => {
  channelEdit.value.open({})
}

  // 定义添加成功方法
  const handleSuccess = () => {
    // 调用更新数据方法
    getlist()
  }
</script>
<template>
  <div>
    <PageContainer :title="title">
      <template #extra>
        <el-button type="primary" @click="addChannel"> 添加分类 </el-button>
        <ChannelEdit ref="channelEdit" @success="handleSuccess"></ChannelEdit>
      </template>
      <template #content>
        <el-form>
          <el-table v-loading="isLoading" :data="formModel">
            <el-table-column type="index" label="序号" width="100%"></el-table-column>
            <el-table-column label="分类名称" prop="cate_name"></el-table-column>
            <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button
                  circle
                  plain
                  type="primary"
                  :icon="Edit"
                  @click="handleEdit(row)"
                ></el-button>
                <el-button
                  circle
                  plain
                  type="danger"
                  :icon="Delete"
                  @click="handleDelete(row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </template>
    </PageContainer>
    <ChannelBox ref="box" @success="handleSuccess"></ChannelBox>
  </div>
</template>
